<template>
  <div class="canvasBox">
    <canvas class="left" v-show="run" ref="canvas"></canvas>
    <div class="right" v-if="visual !== false">
      <button @click="Stop">停止运行</button>
      <br />
      <button @click="Reset">重新加载</button>
      <br />
      <button @click="DownloadConfig">下载配置文件</button>
      <br />
      <div v-for="(row, i) in infoRowList" :key="i">
        <div v-for="(info, j) in row" :key="j">
          <div v-if="info.type === 'text'">
            {{ info.label }}
            <input
              type="text"
              v-model="config[info.prop].Value"
              :disabled="info.disabled"
            />
          </div>
          <div v-if="info.type === 'number'">
            {{ info.label }}
            <input type="text" v-model.number="config[info.prop].Value" />
          </div>
          <div v-if="info.type === 'switch'">
            {{ info.label }}
            <input
              type="checkbox"
              :checked="config[info.prop].Value"
              @input="config[info.prop].Value = $event.target.checked"
            />
          </div>
        </div>
        <br />
      </div>
    </div>
    <div v-show="!run" class="btnList">
      <button v-for="(info, i) in playList" :key="i" @click="infoClick(info)">{{ info.name }}</button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { PlayInfomation } from "@/type";
import { DrawConfig } from "@/visual/type";
import Visual from "@/visual/Visual";
import TranstionSelectList from "@/utils/TransitionSelectList";
import Config from "@/visual/Config";
import WatchBase from "@/utils/WatchValue";
import ReadJson from "@/utils/FileUtils/ReadJson";
import ReadFileString from "@/utils/FileUtils/ReadFileString";
import DownloadFile from "@/utils/FileUtils/DownloadFile";

/** 配置渲染信息 */
export interface DrawInfo {
  prop: string;
  type: string;
  label: string;
  disabled?: boolean;
}

/** 配置渲染列表 */
const infoRowList: DrawInfo[][] = [
  [
    { type: "switch", prop: "sortEveryFrame", label: "排序每一帧" },
    { type: "switch", prop: "sortDate", label: "排序日期" },
    { type: "switch", prop: "dataStack", label: "数值叠加" }
  ],
  [
    { type: "switch", prop: "DateReverse", label: "日期反序" },
    { type: "switch", prop: "ValueReverse", label: "数值反序" },
    { type: "switch", prop: "YReverse", label: "Y轴反序" },
    { type: "switch", prop: "drawRevese", label: "绘制优先级反序" }
  ],
  [
    { type: "switch", prop: "showFps", label: "显示帧数" },
    { type: "switch", prop: "axisSemilogarithmicX", label: "反半对数坐标轴" }
  ],
  [
    { type: "switch", prop: "nameInLeft", label: "名称在左边" },
    { type: "switch", prop: "iconShow", label: "显示图标" },
    { type: "switch", prop: "iconRound", label: "图标为圆形" }
  ],
  [
    {
      type: "text",
      prop: "charset",
      label: "读取csv文件编码(配置文件中修改)",
      disabled: true
    },
    { type: "text", prop: "backgroundColor", label: "背景颜色" },
    { type: "text", prop: "backgroundImageUrl", label: "背景图片地址" },
    { type: "text", prop: "nameColor", label: "名称颜色" },
    { type: "text", prop: "valueColor", label: "数值颜色" },
    { type: "text", prop: "rectColor", label: "矩形颜色" },
    { type: "text", prop: "splitLineColor", label: "分割线颜色" },
    { type: "text", prop: "splitValueColor", label: "分割值颜色" },
    { type: "text", prop: "dateColor", label: "日期颜色" },
    { type: "text", prop: "fpsColor", label: "帧数颜色" }
  ],
  [
    { type: "number", prop: "padding", label: "边距" },
    { type: "number", prop: "rectPadding", label: "数值条边距" },
    { type: "number", prop: "splitFontHeight", label: "分割值字体大小" },
    { type: "number", prop: "namePadding", label: "名称边距" },
    { type: "number", prop: "valueLeftPadding", label: "数值左边距" },
    { type: "number", prop: "iconRightPadding", label: "图标右边距" },
    { type: "number", prop: "topIconPadding", label: "榜首图标边距" },
    { type: "number", prop: "fpsFontSize", label: "帧数字体大小" }
  ],
  [
    { type: "number", prop: "yFrame", label: "Y轴变化帧数" },
    { type: "number", prop: "valueFrame", label: "数据变化帧数" },
    { type: "number", prop: "splitLineFrame", label: "分割线变化帧数" },
    { type: "number", prop: "fpsRefresh", label: "帧数刷新时间(毫秒)" }
  ],
  [
    { type: "number", prop: "firstIndx", label: "要显示第一项" },
    { type: "number", prop: "maxLength", label: "最大显示数" },
    { type: "number", prop: "minRate", label: "最小值率(1-4)" }
  ],
  [
    { type: "number", prop: "splitLineWidth", label: "分割线条宽度" },
    { type: "number", prop: "splitLineCount", label: "分割线最大数量" },
    { type: "number", prop: "splitLineValue", label: "分割线基础值" },
    { type: "number", prop: "splitLineUnit", label: "分割线递增单位" }
  ],
  [
    { type: "text", prop: "transitionY", label: "Y轴运动" },
    { type: "text", prop: "transitionValue", label: "数值运动" },
    { type: "text", prop: "transitionSplitLine", label: "分割线运动" }
  ],
  [
    { type: "text", prop: "formatName", label: "名称格式化公式" },
    { type: "text", prop: "formatValue", label: "数值格式化公式" },
    { type: "text", prop: "formatSplitValue", label: "分割数值格式化公式" }
  ]
];

/** 可视化播放页面 */
@Component({
  name: "Visual"
})
export default class VisualPage extends Vue {
  /** 可视化类 */
  private visual: Visual | false = false;

  /** 配置渲染列表 */
  private infoRowList: DrawInfo[][] = infoRowList;

  /** 是否在运行 */
  private run: boolean = false;

  /** 播放列表 */
  private playList: PlayInfomation[] = [];

  /** 画板元素 */
  private get canvas(): HTMLCanvasElement {
    return this.$refs.canvas as HTMLCanvasElement;
  }

  /** 可视化配置内容 */
  private get config() {
    const config = (this.visual as Visual).configUtils.config;
    for (const _key in config) {
      const key = _key as keyof DrawConfig;
      config[key].Add(null, () => {
        this.$forceUpdate();
      });
    }
    return config;
  }

  /** 进入本页面 */
  private async mounted() {
    this.visual = new Visual(this.canvas);
    this.visual.OverEvent.Add(() => {
      setTimeout(() => {
        this.run = false;
      }, 1000);
    });
    this.playList = await ReadJson<PlayInfomation[]>("./play_list.json");
  }

  /** 播放项被单击 */
  private infoClick(info: PlayInfomation) {
    this.run = true;
    setTimeout(() => {
      if (this.visual) {
        this.visual.Load(info);
      }
    }, 1000);
  }

  /** 停止播放 */
  private Stop(): void {
    if (this.visual) {
      this.visual.Stop();
    }
  }

  /** 重新开始播放 */
  private Reset(): void {
    if (this.visual) {
      this.visual.Reset();
    }
  }

  /** 下载配置 */
  private DownloadConfig() {
    if (this.visual) {
      const save: any = {};
      const config = this.visual.configUtils.config;
      for (const _key in config) {
        const key = _key as keyof DrawConfig;
        save[key] = config[key].Value;
      }
      DownloadFile("config.json", JSON.stringify(save, null, "\t"));
    }
  }
}
</script>

<style lang="scss" scoped>
.canvasBox {
  position: relative;
  .left {
    position: relative;
    left: 0;
    right: 0;
  }
  .right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    background-color: #ccc;
    opacity: 0;
    overflow-y: auto;
    &:hover {
      opacity: 1;
    }
  }
}
.btnList {
  text-align: center;
  padding-top: 20px;
  button {
    display: inline-block;
    margin: 10px;
    font-size: 30px;
  }
}
</style>
